<template>
	<view class="padding-bottom-xl">
		<u-navbar title="服务中心" @leftClick="leftClick" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e00000" />
        <view class="boxContent position-r bg-white b-r-10 p-20 border-box">
            <view class="flex">
                <view>
                    <image class="boxImg b-r-10" src="@/static/img/index/photo.png" ></image>
                </view>
                <view class="m-l-10 font-18 font-b color-b line-h-80">{{serviceCenterData.centerName}}</view>
            </view>
            <view class="flex justify-between color-gray m-t-10" @click="callPhone">
                <view>电话：{{ serviceCenterData.centerMobile }}</view>
                <u-icon name="phone" color="gray" size="20"></u-icon>
            </view>
            <view class="flex justify-between color-gray m-t-20">
                <view class="addrress">地址：{{ serviceCenterData.address }}</view>
                <!-- #ifdef APP-PLUS -->
                <view v-if="serviceCenterData.longitude && serviceCenterData.latitude" @click="navigation1">
                    <u-icon name="map" color="gray" size="20"></u-icon>
                </view>
                <!-- #endif -->
								<!-- #ifdef H5 -->
                <view v-if="serviceCenterData.longitude && serviceCenterData.latitude" @click="isNavigation=true">
                    <u-icon name="map" color="gray" size="20"></u-icon>
                </view>
                 <!-- #endif -->
                <view v-else  @click="copyAddrress">复制</view>
            </view>
            <view class="position-a default p-l-20 p-r-20 color-w font-12 font-b bg-red1 line-h-40 text-center" v-if="serviceCenterData.isDefault == 1">默认</view>
        </view>
        <view class="boxContent bg-white b-r-10 p-20 border-box">
            <view class="color-b font-18 font-b">简介</view>
            <view class="line-h-50 font-13 color-3 m-t-10">{{ serviceCenterData.introduce }}</view>
        </view>
        <view class="boxContent bg-white b-r-10" v-for="(img,index) in serviceCenterData.pictures" :key="index">
            <image class="w-100 imgH" :src="img" @click="lookImg(img)"></image>
        </view>


        <view class="w-100" style="height: 160rpx;"></view>
        <view class="fixedBox">
            <view class="boxContent bg-red1 color-w font-14 b-r-10 font-b line-h-90 text-center" @click="toPath">立即申请</view>
        </view>

        <u-popup :show="isNavigation" bgColor="transparent" @close="isNavigation = false">
            <view class="locationItem bg-white text-center font-18" @tap="navigation(1)">高德导航</view>
            <!-- <view class="locationItem bg-white text-center font-18" @tap="navigation(2)">腾讯导航</view>
            <view class="locationItem bg-white text-center font-18" @tap="navigation(3)">百度导航</view> -->
            <view class="locationItem bg-white text-center font-18 c-65 m-t-30 m-b-60" @tap="isNavigation = false">取消</view>
        </u-popup>
	</view>

</template>

<script>
    import { getCenterInfoById } from '@/common/api/serviceCenter.js'
	import navigationMixIn from "@/common/mixins/navigation";
	export default {
		mixins: [navigationMixIn],
		data() {
			return {
				serviceCenterData: {},
                isNavigation: false,
			};
		},
        onLoad(options){
            if(options.serviceCenterId){
				this.loadInfo(options.serviceCenterId)
			}
        },
		methods: {
			navigation1() {
				if (!this.serviceCenterData.longitude && !this.serviceCenterData.latitude) return
				this.openNavigation({
					location: [this.serviceCenterData.longitude, this.serviceCenterData.latitude],
					title: this.serviceCenterData.address
				})
			},
            // 导航
            navigation(type) {
                // 根据状态判断导航目的地
                // 高德 https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称
                // 腾讯 http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:address
                // 百度 http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html"
                // let path = `https://uri.amap.com/marker?position=116.306278,39.973294&name=北京市海淀区海淀街道北京技术交易促进中心倒座庙小区西区`;
                let path;
                if(type == 1){
                    path = `https://uri.amap.com/marker?position=${this.serviceCenterData.longitude},${this.serviceCenterData.latitude}&name=${this.serviceCenterData.address}`;
                }else if(type == 2){
                    path = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${this.serviceCenterData.latitude},${this.serviceCenterData.longitude};addr:${this.serviceCenterData.address}`;
                }else{
                    path = `http://api.map.baidu.com/marker?location=${this.serviceCenterData.latitude},${this.serviceCenterData.longitude}&title=${this.serviceCenterData.address}&output=html`
                }
                
                // #ifdef H5
                window.location.href = path
                // #endif
                // #ifdef APP-PLUS
                // 安卓
                plus.runtime.openURL(encodeURI(path));
                // #endif
            },
			// 预览图片 
			lookImg(url){
				uni.previewImage({
					urls: [url]
				});
			},
			leftClick(){
			// 	let pages = getCurrentPages()
 			// 	var beforePagePath = pages[pages.length - 2].route; // 前一个页面
			// 	// 如果不是从服务中心列表页进入,则才返回首页
			// 	if(beforePagePath !== 'pages/serviceCenter/selectServiceCenter'){
			// 		setTimeout(() => {
			// 			uni.switchTab({
			// 				url: '/pages/index/index'
			// 			})
			// 		},200)
			// 	}else{
			// 		setTimeout(() => {
			// 			uni.navigateBack()
			// 		},200)
				// }
			},
			loadInfo(id){
				getCenterInfoById(id).then(res => {
					if( res.code == 200 ){
						this.serviceCenterData = res.data;
                        if(res.data && res.data.centerStatus){
                            setTimeout(()=>{
                                uni.showModal({
                                    showCancel:false,
                                    title: '提示',
                                    content: '该服务中心已禁用,请联系客服 !',
                                    success: (res) => {
                                        if (res.confirm) {
                                            uni.navigateTo({
                                                url: '/pages/serviceCenter/selectServiceCenter'
                                            });
                                        }
                                    }
                                });
                            },500)
                        }
					}
				})
			},
			copyAddrress(){
                uni.setClipboardData({
                    data: this.serviceCenterData.address,
                    success: function() {
                        uni.showToast({
                            title: '地址复制成功',
                            icon: 'none'
                        });
                    }
                })
            },
            callPhone(){
                uni.makePhoneCall({
                    phoneNumber: this.serviceCenterData.centerMobile
                });
            },
            toPath(){
                uni.navigateTo({
                    url: '/pages/newVoucher/addVoucher?serviceCenterId='+this.serviceCenterData.id
                });
            }
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F2F2F2;
}
.addrress{
    min-width: 560rpx;
    max-width: 560rpx
}
.imgH{
    height: 330rpx;
}
.color-3{
    color: #333333;
}
.boxContent{
    width: calc(100% - 40rpx);
    margin: 20rpx  auto;
}
.boxImg{
    width: 70rpx;
    height: 80rpx;
}
.default{
    top: 0;
    right: 0;
    border-bottom-left-radius: 30rpx;
    border-top-right-radius: 10rpx;
}
.btnSubmit{
    position: fixed;
    bottom: 100rpx;
    z-index: 9999;
    left: 20rpx;
}
.fixedBox{
    width: 100%;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 140rpx;
    z-index: 999;
}
.locationItem{
  padding: 26rpx;
  border-radius: 10rpx;
  border-bottom: 1rpx solid #ccc;
  width: calc(100vw - 60rpx);
  margin-left: 30rpx;
}
.c-65 {
    color: #656565;
}
</style>